// 导入
import React from 'react';
import ReactDOM from 'react-dom/client';

// 创建渲染根节点
const root = ReactDOM.createRoot(document.getElementById('root'));

// 列表渲染
const books1 = ['React', 'Vue', 'Angular'];

const books2 = [<li>React</li>, <li>Vue</li>, <li>Angular</li>];

const books3 = books1.map((item, i) => <h1 key={i}>{item}</h1>);

// 数组每一个item格式转换

const page = (
  <div>
    {books3}
    {books1.map((item, i) => (
      <li key={i}>{item}</li>
    ))}
  </div>
);

// 渲染
root.render(page);
